<template>
  <div class="app-container">
    <div style="display: flex;align-items: center;margin-bottom: 50px;">
      <div style="display: flex;" class="topNumList">
        <div class="topNumItems">
          <div class="finNum">￥{{ totalAmount }}</div>
          <!-- <div v-else class="finNum">0.00</div> -->
          <div class="finText">总收益</div>
        </div>
        <div class="topNumItems">
          <div class="finNum">￥{{ unsettledAmount }}</div>
          <!-- <div v-else class="finNum">0.00</div> -->
          <div class="finText">待结算金额</div>
        </div>
        <div class="topNumItems">
          <div class="finNum">￥{{ withdrawAmount }}</div>
          <!-- <div v-else class="finNum">0.00</div> -->
          <div class="finText">已提现金额</div>
        </div>
      </div>
      <!-- <div><el-button @click="applyWithdraw" type="primary" size="mini">申请提现</el-button></div> -->
    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="提现编号" prop="withdrawSerial">
        <el-input v-model="queryParams.withdrawSerial" placeholder="提现编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="queryParams.storeName" placeholder="店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="申请时间" prop="applyTime">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="审核时间" prop="applyTime">
        <el-date-picker v-model="datePayRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="收支类型" prop="payeeType">
        <el-select v-model="queryParams.payeeType" placeholder="收支类型" clearable>
          <el-option v-for="dict in dict.type.income_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="withdrawList" @selection-change="handleSelectionChange">
      <!-- 交易编号 订单金额-->
      <el-table-column label="交易编号" align="left" prop="withdrawSerial" />
      <el-table-column label="收款人类型" align="left" prop="payeeType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.user_role" :value="scope.row.payeeType" />
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="left" prop="applyTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" align="left" prop="withdrawAmount">
      <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.withdrawAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="手续费" align="left" prop="serviceAmount" />
      <el-table-column label="到账金额" align="left" prop="accountAmount">
      <template slot-scope="scope">
          <span style="font-weight: bold;color: #f00;">¥{{scope.row.accountAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="账号名称" align="left" prop="firmName" />
      <el-table-column label="银行卡号" align="left" prop="incomeCard" />
      <el-table-column label="支行名称" align="left" prop="branchName" />
      <el-table-column label="预留手机号" align="left" prop="reservedMobile" />
      <el-table-column label="到账时间" align="left" prop="reservedMobile" />
      <el-table-column label="状态" align="left" prop="examStatus">
        <template slot-scope="scope">
          <el-tag size="medium">
            <dict-tag :options="dict.type.exam_status" :value="scope.row.examStatus" />
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="left" prop="examRemark" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改提现明细对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker clearable v-model="form.applyTime" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择申请时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="提现金额" prop="withdrawAmount">
          <el-input v-model="form.withdrawAmount" placeholder="请输入提现金额" />
        </el-form-item>
        <el-form-item label="手续费" prop="serviceAmount">
          <el-input v-model="form.serviceAmount" placeholder="请输入手续费" />
        </el-form-item>
        <el-form-item label="到账金额" prop="accountAmount">
          <el-input v-model="form.accountAmount" placeholder="请输入到账金额" />
        </el-form-item>
        <el-form-item label="账号名称" prop="firmName">
          <el-input v-model="form.firmName" placeholder="请输入账号名称" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="incomeCard">
          <el-input v-model="form.incomeCard" placeholder="请输入银行卡号" />
        </el-form-item>
        <el-form-item label="支行名称" prop="branchName">
          <el-input v-model="form.branchName" placeholder="请输入支行名称" />
        </el-form-item>
        <el-form-item label="预留手机号" prop="reservedMobile">
          <el-input v-model="form.reservedMobile" placeholder="请输入预留手机号" />
        </el-form-item>
        <el-form-item label="审核时间" prop="examTime">
          <el-date-picker clearable v-model="form.examTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择审核时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核人" prop="examUser">
          <el-input v-model="form.examUser" placeholder="请输入审核人" />
        </el-form-item>
        <el-form-item label="备注" prop="examRemark">
          <el-input v-model="form.examRemark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="逻辑删除" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入逻辑删除" />
        </el-form-item>
        <el-form-item label="创建时间" prop="crTime">
          <el-date-picker clearable v-model="form.crTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="upTime">
          <el-date-picker clearable v-model="form.upTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备用字段1" prop="withdrawField1">
          <el-input v-model="form.withdrawField1" placeholder="请输入备用字段1" />
        </el-form-item>
        <el-form-item label="备用字段2" prop="withdrawField2">
          <el-input v-model="form.withdrawField2" placeholder="请输入备用字段2" />
        </el-form-item>
        <el-form-item label="备用字段3" prop="withdrawField3">
          <el-input v-model="form.withdrawField3" placeholder="请输入备用字段3" />
        </el-form-item>
        <el-form-item label="备用字段4" prop="withdrawField4">
          <el-input v-model="form.withdrawField4" placeholder="请输入备用字段4" />
        </el-form-item>
        <el-form-item label="备用字段5" prop="withdrawField5">
          <el-input v-model="form.withdrawField5" placeholder="请输入备用字段5" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from "@/store";
  import {
    listWithdraw,
    getWithdraw,
    delWithdraw,
    addWithdraw,
    updateWithdraw,
    systemWallet
  } from "@/api/system/withdraw";

  export default {
    name: "Withdraw",
    dicts: ['exam_status', 'user_role'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 提现明细表格数据
        withdrawList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          storeName:null,
          withdrawSerial:null,
          payeeType: null,
          applyTime: null,
          withdrawAmount: null,
          serviceAmount: null,
          accountAmount: null,
          firmName: null,
          incomeCard: null,
          branchName: null,
          reservedMobile: null,
          examTime: null,
          examUser: null,
          examStatus: null,
          examRemark: null,
          crTime: null,
          upTime: null,
          withdrawField1: null,
          withdrawField2: null,
          withdrawField3: null,
          withdrawField4: null,
          withdrawField5: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        financialFigures: [{
            text: '总收益',
            number: "0.00"
          },
          {
            text: '待结算金额',
            number: "0.00"
          },
          {
            text: '可提现金额',
            number: "0.00"
          },
          {
            text: '已提现金额',
            number: "0.00"
          }
        ],
        dateRange: [],
        datePayRange: [],
        // 总收益
        totalAmount:'',
        // 待结算金额
        unsettledAmount:'',
        // 已到账金额
        withdrawAmount:''
      };
    },
    created() {
      console.log(store.getters.name,store.getters.id,'name和id')
      this.getList();
      this.systemWallet()
    },
    methods: {
      systemWallet(){
        systemWallet({
          sysUserId:store.getters.id
        }).then(response => {
          if(response.data){
            this.totalAmount =  response.data.totalAmount
            this.unsettledAmount = response.data.unsettledAmount
            this.withdrawAmount = response.data.withdrawAmount
          } else {
            this.totalAmount =  "0.00"
            this.unsettledAmount = "0.00"
            this.withdrawAmount = "0.00"
          }

        });
      },
      /** 查询提现明细列表 */
      getList() {
        this.loading = true;
        listWithdraw(this.withdrawDateRange(this.queryParams, this.dateRange, this.datePayRange)).then(response => {
          this.withdrawList = response.data;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          withdrawSerial: null,
          payeeType: null,
          applyTime: null,
          withdrawAmount: null,
          serviceAmount: null,
          accountAmount: null,
          firmName: null,
          incomeCard: null,
          branchName: null,
          reservedMobile: null,
          examTime: null,
          examUser: null,
          examStatus: null,
          examRemark: null,
          delFlag: null,
          crTime: null,
          upTime: null,
          withdrawField1: null,
          withdrawField2: null,
          withdrawField3: null,
          withdrawField4: null,
          withdrawField5: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
        this.dateRange = []
        this.datePayRange= []
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.withdrawSerial)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加提现明细";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const withdrawSerial = row.withdrawSerial || this.ids
        getWithdraw(withdrawSerial).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改提现明细";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.withdrawSerial != null) {
              updateWithdraw(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addWithdraw(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const withdrawSerials = row.withdrawSerial || this.ids;
        this.$modal.confirm('是否确认删除提现明细编号为"' + withdrawSerials + '"的数据项？').then(function() {
          return delWithdraw(withdrawSerials);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/withdraw/export', {
          ...this.queryParams
        }, `withdraw_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style scoped>
  .topNumList {}

  .topNumItems {
    display: flex;
    flex-direction: column;
    margin-right: 50px;
  }

  .topNumList .finNum {
    color: #1890ff;
    font-size: 30px;
    font-weight: 600;
  }

  .topNumList .finText {}
</style>
